<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<link rel="Stylesheet" type="text/css" href="/Mass_template/common/wColorPicker/src/wColorPicker.css" />
<script type="text/javascript" src="/Mass_template/common/wColorPicker/lib/rgbHex.min.js"></script>
<script type="text/javascript" src="/Mass_template/common/wColorPicker/src/wColorPicker.js"></script>
<style>
.wColorPicker-input {
	margin-top: 10px;
	width: 75px;
	border: solid #CACACA 1px;
	border-radius: 5px;
	padding: 4px 5px;
}
</style>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var sheet_init = {};
		sheet_init.Cfg = {FrozenCol:0,SearchMode:smLazyLoad,Page:30};
		
		//HeaderMode
		sheet_init.HeaderMode = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		sheet_init.Cols = [
		       			{Header:"NO",		Type:"Seq", Align:"Right"},
		       			{Header:"상태",		Type:"Status", Align:"Center"},
		       			{Header:"삭제",		Type:"DelCheck"},
		       			{Header:"문자열",	Type:"Text", KeyField:1, Align:"Center"},
		       			{Header:"콤보",		Type:"Combo", Width:80, ComboText:"대기|진행중|완료", ComboCode:"01|02|03",PopupText:"대기|진행중|완료"},
		       			{Header:"콤보에디트",	Type:"ComboEdit", Width:80, ComboText:"고려대학교|고려대학교2|국민대학교|서울대학교|숙명여자대학교|연세대학교|울산대학교|울산과학기술대학교|이화여자대학교|인천대학교|인천가톨릭대학교"},
		       			{Header:"팝업",		Type:"Popup", Width:100},
		       			{Header:"팝업에디트",	Type:"PopupEdit", Width:100},
		       			{Header:"자동합계",	Type:"AutoSum", Align:"Right",Width:70,Format:"NullInteger"},
		       			{Header:"자동평균",	Type:"AutoAvg", Align:"Right",Width:70, Format:"NullFloat"},
		       			{Header:"정수",		Type:"Int", Align:"Right", Format:"Integer",Width:70, Hidden:1},
		       			{Header:"실수",		Type:"Float", Align:"Right", Format:"Float",Width:70, Hidden:1},
		       			{Header:"날짜",		Type:"Date", Align:"Center", Format:"Ymd", Width:100},
		       			{Header:"패스워드",	Type:"Pass", Hidden:1},
		       			{Header:"체크박스",	Type:"CheckBox"},
		       			{Header:"라디오",	Type:"Radio"}
		       		]; 
		
		IBS_InitSheet(mySheet, sheet_init);
		
		// 컬럼의 너비 조정
		mySheet.FitColWidth();
	
		doAction("search");
	});
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data.xml");
				break;
		}
	}

	$('#wColorPicker-input').keyup(function() {
		var color = window.rgbHex($(this).val());

		if (color) {
			$("#wColorPicker").wColorPicker('color', $(this).val());
		}
	});
	
	function mySheet_OnMouseDown(Button, Shift, X, Y) {
		$('#row_id').val(mySheet.MouseRow());
		$('#col_id').val(mySheet.MouseCol());
	}
	
	function mySheet_OnSearchEnd(Code, Msg, StCode, StMsg) {
// 		mySheet.SetCellFont("FontBold", 1,1,2,3,1) ;
	}

	function setRowBackColor() {
		var row = $('#row_id').val();
		var color = $('#wColorPicker-input').val();
		
		row = row?row:-1;		// 값이 비어 있으면 -1로 상태를 변경한다.
		
		if (row > -1 && color.length > 0) {
			mySheet.SetRowBackColor(row, color);
		} else {
			alert("적용할 행의 정보가 없습니다.");
		}
	}
	
	function setColBackColor() {
		var col = $('#col_id').val();
		var color = $('#wColorPicker-input').val();
		
		col = col?col:-1;		// 값이 비어 있으면 -1로 상태를 변경한다.
		
		if (col > -1 && color.length > 0) {
			mySheet.SetColBackColor(col, color);
		} else {
			alert("적용할 열의 정보가 없습니다.");
		}
	}
	
	function setCellBackColor() {
		var row = $('#row_id').val();
		var col = $('#col_id').val();
		var color = $('#wColorPicker-input').val();
		
		row = row?row:-1;		// 값이 비어 있으면 -1로 상태를 변경한다.
		col = col?col:-1;		// 값이 비어 있으면 -1로 상태를 변경한다.
		
		if (row > -1 && col > -1 && color.length > 0) {
			mySheet.SetCellBackColor(row, col, color);
		} else {
			alert("적용할 셀의 정보가 없습니다.");
		}
	}
</script>
<title>행/열/셀 배경색 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">행/열/셀 배경색 예제</div>
	<div id="desc">
		RowBackColor 메서드를 이용하여 행 전체의 배경색, ColBackColor 메서드를 이용하여 열 배경색, CellBackColor 메서드를 이용하여 셀 배경색을 설정하거나 확인한다.<br>
		색상 설정은 WebColor 또는 Basic 16 Color 문자열로 설정한다.
	</div>

	<div id="functionArea">
		<div id="wColorPicker" style="line-height:0px;font-size:0px;"></div>
		<div>
			<span>선택 색상 : <input id="wColorPicker-input" class="wColorPicker-input" type="text"/></span>
			<span>행 : <input id="row_id" size=4 class="wColorPicker-input" type="text"/></span>
			<span>열 : <input id="col_id" size=4 class="wColorPicker-input" type="text"/></span>
		</div>
      	<div>
      		<input type="button" value="행 배경색 적용하기" onclick="setRowBackColor();">
      		<input type="button" value="열 배경색 적용하기" onclick="setColBackColor();">
      		<input type="button" value="셀 배경색 적용하기" onclick="setCellBackColor();">
      	</div>
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>
<script type="text/javascript">
	$("#wColorPicker").wColorPicker({
		color : '#FFFFFF',
		onSelect : function(color) {
			$("#wColorPicker-input").css('background', color).val(color);
		},
		onMouseout : function(color) {
			$("#wColorPicker-input").css('background', color).val(color);
		}
	})
</script>